<template>
  <el-container id="container">
    <el-header style="width: 100%;" height="120px">
      <Header :items="navItems" v-on:selected="changeSelected"></Header>
    </el-header>
    <el-main>
      <Body :items="bodyItems" :topic="navItems[this.currentTopicIndex].title"></Body>
    </el-main>
    <el-footer>
      <div id="footer">{{desc}}</div>
    </el-footer>
  </el-container>
</template>
<script>
import Header from './Header.vue';
import Body from './Body.vue';
import FM from "../tools/FileManager.js"

export default{
    components :{
        Header:Header,
        Body:Body
    },
    mounted(){
      FM.getPostContent(FM.getAllTopic()[0],FM.getPosts(0)[0]).then((res)=>{
        console.log(res)
      })
    },
    data(){
        return {
            navItems : FM.getAllTopic().map((item,idx)=>{
              return {
                index: idx,
                title:item
              }
            }),
            desc:"交流学习",
            currentTopicIndex:0
        }
    },
    methods:{
      changeSelected(idx){
        console.log(idx);
        this.currentTopicIndex = idx;
      }
    },
    computed: {
      bodyItems(){
        return FM.getPosts(this.currentTopicIndex).map((item,idx)=>{
          return {
            index:idx,
            title:item
          }
        })
      }
    }
}
</script>
<style scoped>
#container {
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 30px;
    height: 800px;
}
#footer {
    text-align: center;
    background-color: bisque;
    height: 40px;
    color: #717171;
}
</style>